<template>
  <div class="audio-setting">
    <el-divider class="header-title">播放设置</el-divider>
    <el-form label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="主播播放类型:">
            <el-select placeholder="主播播放类型" v-model="audioSetting.play.anchor.type">
              <el-option :key="'playType_' + index" v-for="(item, index) in playTypes" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="主播播放速度:">
            <el-slider @change="handleSpeedChange(audioSetting.play.anchor.speed, 'anchor')"
              v-model="audioSetting.play.anchor.speed" :min="audioSetting.play.anchor.min"
              :max="audioSetting.play.anchor.max" :step="1" show-stops :show-tooltip="false" show-input>
            </el-slider>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="小助理播放类型:">
            <el-select placeholder="小助理播放类型" v-model="audioSetting.play.assistant.type">
              <el-option :key="'playType_' + index" v-for="(item, index) in playTypes" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="小助理播放速度:">
            <el-slider @change="handleSpeedChange(audioSetting.play.assistant.speed, 'assistant')"
              v-model="audioSetting.play.assistant.speed" :min="audioSetting.play.assistant.min"
              :max="audioSetting.play.assistant.max" :step="1" show-stops :show-tooltip="false" show-input>
            </el-slider>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider class="header-title">音量设置</el-divider>
    <el-form label-width="120px">
      <el-form-item label="主播音频音量:">
        <el-slider @change="handleVolumnChange(audioSetting.volume.anchor, 'anchor')" :max="300"
          v-model="audioSetting.volume.anchor" :show-tooltip="false" :step="1" show-stops show-input>
        </el-slider>
      </el-form-item>
      <el-form-item label="小助理音频音量:">
        <el-slider @change="handleVolumnChange(audioSetting.volume.assistant, 'assistant')" :max="300"
          v-model="audioSetting.volume.assistant" :show-tooltip="false" :step="1" show-stops show-input>
        </el-slider>
      </el-form-item>
    </el-form>
    <el-divider class="header-title">音调设置</el-divider>
    <el-form label-width="120px">
      <el-form-item label="音调设置:">
        <el-slider @change="handleGainDbChange" :min="equalizerDefaultArr[0] - 12" :max="equalizerDefaultArr[0] + 12"
          v-model="audioSetting.equalizer.list[0]" :show-tooltip="false" :step="1" show-stops show-input></el-slider>
      </el-form-item>
    </el-form>


    <!-- <div class="audioSoundEffects">
      <div class="set_default"><el-button @click="setDefault" type="primary">恢复默认值</el-button></div>
      <div class="item_content">
        <div class="item" v-for="(item, index) in equalizerTypes" :key="index">
          <el-tooltip :content="item.desc">
            <div class="name">{{ item.label }}</div>
          </el-tooltip>
          <el-slider :min="equalizerDefaultArr[index - 1] - 12" :max="equalizerDefaultArr[index - 1] + 12"
            @change="handleVolumnChange" v-model="audioSetting.equalizer.list[index - 1]" :show-tooltip="false"
            :step="1" show-stops show-input></el-slider>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { playTypes, equalizerTypes } from "@/enum/enums";
import { realTimeChangeVolumn, realTimeChangeSpeed, realTimeChangeGainDb } from '@/api/live/live';

export default {
  name: 'AudioSetting',
  data() {
    return {
      playTypes,
      equalizerTypes,
      value1: 50,
    };
  },
  created() {
  },
  computed: {
    equalizerDefaultArr() {
      return this.equalizerTypes.map(item => item.default);
    },
    audioSetting() {
      return this.pageConfig.audioSetting;
    },
    pageConfig() {
      return this.$store.state.page.config;
    }
  },
  methods: {
    handleGainDbChange(val) {
      realTimeChangeGainDb({ bandIndex: 3, gainDb: val - 800 }).then((res) => {
      })
    },
    handleSpeedChange(val, playerType) {
      realTimeChangeSpeed({ playerType, speed: (val / 100).toFixed(2) }).then((res) => {
      })
    },
    handleVolumnChange(val, playerType) {
      console.log(val, playerType);
      realTimeChangeVolumn({ playerType, volumn: (val / 100).toFixed(2) }).then((res) => {
      })
    },
    setDefault() {
      let defaultArr = this.equalizerTypes.map(item => item.default);
      this.audioSetting.equalizer.list = [...this.equalizerDefaultArr];
    }
  }
};
</script>

<style lang="scss" scoped>
.audioSoundEffects {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border-first);

  .set_default {
    display: flex;
    flex-direction: row-reverse;
  }

  .item_content {
    display: flex;
    padding-top: 10px;

    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .name {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
